<template>
	<view class="page-wrapper">
		<!-- <view class="close-page" @tap="handleJump" data-type="BACK"><text class="fu-iconfont">&#xe7be;</text></view> -->

		<!-- 头部 -->
		<view class="page-header">
			<image class="logo" mode="aspectFill" :src="SYSTEM_CONFIG.logo"></image>
			<!-- <image class="page-header-bg" :src="STATIC_IMAGE_BASE_URL + '/login/login_top_bg.png'"></image>
				<view class="page-header-content">
			  <image class="logo" mode="aspectFill" :src="SYSTEM_CONFIG.logo"></image>
			  <view class="title">欢迎来到 {{SYSTEM_CONFIG.appName}}</view>
			</view> -->
		</view>

		<view class="page-content">
			<!-- 忘记密码 -->
			<view class="login-phone form-wapper">
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/phone1.png" mode=""></image>
					<view class="phone input-wapper">
						<view class="mobile rside">
							<input
								:focus="isMobile.focus"
								@blur="loseFocus('mobile')"
								@input="enterAccount('mobile')"
								placeholder-class="input-placeholder"
								type="number"
								v-model="phone"
								placeholder="请输入手机号"
								maxlength="11"
							/>
							<image v-show="isMobile.delete" @click="onDelete('mobile')" class="close" src="../../../static/empty/close.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/security1.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input
								:focus="isCode.focus"
								@blur="loseFocus('code')"
								@input="enterAccount('code')"
								placeholder-class="input-placeholder"
								type="number"
								v-model="vercode"
								placeholder="请输入验证码"
								maxlength="6"
							/>
							<image v-show="isCode.delete" @click="onDelete('code')" class="close" src="../../../static/empty/close.png" mode=""></image>
						</view>
						<button class="get-code-btn" type="default" :loading="verCodeBtnLoading" @click="handleSendVerCode">
							{{ beginning ? '倒计时' + time + 's' : '获取验证码' }}
						</button>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/password.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input
								:focus="isPassword.focus"
								@blur="loseFocus('password')"
								@input="enterAccount('password')"
								placeholder-class="input-placeholder"
								v-if="passwordInputType == 'password'"
								type="password"
								v-model="password"
								placeholder="请输入密码（6~12位字母+数字）"
								maxlength="12"
							/>
							<input
								:focus="isPassword.focus"
								@blur="loseFocus('password')"
								@input="enterAccount('password')"
								placeholder-class="input-placeholder"
								v-if="passwordInputType == 'text'"
								type="text"
								v-model="password"
								placeholder="请输入密码（6~12位字母+数字）"
								maxlength="12"
							/>
							<image v-show="isPassword.delete" @click="onDelete('password')" class="close" src="../../../static/empty/close.png" mode=""></image>
						</view>
						<view class="eye" @tap="handleTogglePasswordInputType('password')">
							<text class="fu-iconfont" v-if="passwordInputType == 'password'">&#xe7e9;</text>
							<text class="fu-iconfont" v-if="passwordInputType == 'text'">&#xe7e6;</text>
						</view>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/password.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input
								:focus="isNewPassword.focus"
								@blur="loseFocus('newpassword')"
								@input="enterAccount('newpassword')"
								placeholder-class="input-placeholder"
								v-if="newpasswordInputType == 'password'"
								type="password"
								v-model="againPassword"
								placeholder="请再次输入密码（6~12位字母+数字）"
								maxlength="12"
							/>
							<input
								:focus="isNewPassword.focus"
								@blur="loseFocus('newpassword')"
								@input="enterAccount('newpassword')"
								placeholder-class="input-placeholder"
								v-if="newpasswordInputType == 'text'"
								type="text"
								v-model="againPassword"
								placeholder="请再次输入密码（6~12位字母+数字）"
								maxlength="12"
							/>
							<image v-show="isNewPassword.delete" @click="onDelete('newpassword')" class="close" src="../../../static/empty/close.png" mode=""></image>
						</view>
						<view class="eye" @tap="handleTogglePasswordInputType('newpassword')">
							<text class="fu-iconfont" v-if="newpasswordInputType == 'password'">&#xe7e9;</text>
							<text class="fu-iconfont" v-if="newpasswordInputType == 'text'">&#xe7e6;</text>
						</view>
					</view>
				</view>
			</view>

			<view class="login-btn-wrapper"><button class="login-btn" :loading="submitBtnLoading" @click="handleSubmit">确认找回</button></view>

			<!-- 注册成功弹窗 -->
			<successPop :showPopup="showPopup" :showTitle="'找回成功'" @confirm="confirm"></successPop>
		</view>
	</view>
</template>
<script>
import { validate } from '@/common/utils/index';
import { SYSTEM_CONFIG } from '@/common/config.js';
import successPop from '@/components/xs-components/success-pop/success-pop.vue';

export default {
	components: { successPop },
	data() {
		return {
			isMobile: {
				focus: false,
				delete: false
			},
			isCode: {
				focus: false,
				delete: false
			},
			isPassword: {
				focus: false,
				delete: false
			},
			isNewPassword: {
				focus: false,
				delete: false
			},
			SYSTEM_CONFIG, // 系统配置

			/*================================================
      =            使用此模板你需要修改的参数            =
      =================================================*/

			STATIC_IMAGE_BASE_URL: '/fu-templete/static/', // 图片基础路径

			/*=====  End of 使用此模板你可能需要改到的参数  ======*/

			phone: '', // 手机号
			vercode: '', // 验证码
			password: '', // 密码
			againPassword: '', // 再次输入密码

			submitBtnLoading: false, // 提交按钮加载动画
			verCodeBtnLoading: false, // 获取验证码按钮动画

			passwordInputType: 'password', // 密码输入框类型 用于显示隐藏密码
			newpasswordInputType: 'password', // 密码输入框类型 用于显示隐藏密码

			/*========================================
      =            发送验证码所需参数            =
      =========================================*/

			time: 60,
			beginning: false,

			/*=====  End of 发送验证码所需参数  ======*/
			showPopup: false // 注册成功弹窗
		};
	},

	methods: {
		enterAccount(e) {
			if (e == 'mobile') {
				if (this.phone != '') {
					this.isMobile.delete = true;
				} else {
					this.isMobile.delete = false;
				}
			} else if (e == 'code') {
				if (this.vercode != '') {
					this.isCode.delete = true;
				} else {
					this.isCode.delete = false;
				}
			} else if (e == 'password') {
				if (this.password != '') {
					this.isPassword.delete = true;
				} else {
					this.isPassword.delete = false;
				}
			} else if (e == 'newpassword') {
				if (this.newpassword != '') {
					this.isNewPassword.delete = true;
				} else {
					this.isNewPassword.delete = false;
				}
			}
		},
		onDelete(e) {
			if (e == 'mobile') {
				this.phone = '';
				this.isMobile.focus = true;
				this.isMobile.delete = false;
			} else if (e == 'code') {
				this.vercode = '';
				this.isCode.focus = true;
				this.isCode.delete = false;
			} else if (e == 'password') {
				this.password = '';
				this.isPassword.focus = true;
				this.isPassword.delete = false;
			} else if (e == 'newpassword') {
				this.againPassword = '';
				this.againPassword.focus = true;
				this.againPassword.delete = false;
			}
		},
		loseFocus(e) {
			if (e == 'mobile') {
				this.isMobile.focus = false;
			} else if (e == 'code') {
				this.isCode.focus = false;
			} else if (e == 'password') {
				this.isPassword.focus = false;
			} else if (e == 'newpassword') {
				this.isNewPassword.focus = false;
			}
		},

		// 提交
		handleSubmit() {
			if (this.submitBtnLoading) return false;
			let { phone, vercode, password, againPassword } = this;

			if (!validate(phone, 'phone')) return this.$message.info('请正确输入手机号');
			if (!vercode) return this.$message.info('请正确输入验证码');
			if (!validate(password, 'password')) return this.$message.info('请正确输入密码');
			if (password != againPassword) return this.$message.info('两次输入的密码不一致');

			this.submitBtnLoading = true;

			this.$api
				.post(global.apiUrls.postForgetPassword, {
					mobile: phone,
					code: vercode,
					password,
					security_code: againPassword,
					type: '2'
				})
				.then(res => {
					this.submitBtnLoading = false;
					// this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.showPopup = true;
						// setTimeout(() => {
						// 	uni.navigateBack();
						// }, 1000);
					} else {
						this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					this.submitBtnLoading = false;
				});
		},

		// 切换密码输入框类型
		handleTogglePasswordInputType(type) {
			if (type == 'password') {
				this.passwordInputType = this.passwordInputType == 'password' ? 'text' : 'password';
			} else {
				this.newpasswordInputType = this.newpasswordInputType == 'password' ? 'text' : 'password';
			} 
			// this.passwordInputType = this.passwordInputType == 'password' ? 'text' : 'password';
		},

		// 发送验证码
		handleSendVerCode() {
			if (this.verCodeBtnLoading) return false;
			let { phone } = this;
			if (!validate(phone, 'phone')) return this.$message.info('请正确输入手机号');
			if (this.beginning) return false;

			this.verCodeBtnLoading = true;
			this.$api
				.post(global.apiUrls.GetVerifyCode, {
					mobile: phone,
					event: 'resetpassword',
					type: 2
				})
				.then(res => {
					this.verCodeBtnLoading = false;
					if (res.data.code == 1) {
						this.$message.info('验证码已发送至手机' + phone + '请注意查收');
						// 显示倒计时
						this.beginning = true;

						// 开始倒计时
						this.timer = setInterval(() => {
							let tempTime = this.time;
							if (tempTime == 0) {
								// 倒计时结束
								clearInterval(this.timer);
								this.beginning = false;
								this.time = 60;
								return;
							}
							this.time--;
						}, 1000);
					} else {
						this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					this.verCodeBtnLoading = false;
				});
		},
		// 确认
		confirm(e) {
			this.showPopup = e;
			uni.navigateBack();
		}
	}
};
</script>
<style lang="scss">
@import './index.scss';
</style>
